<!--  -->
<template>
  <div>
      <Header></Header>
       <div class="container">
        <el-main class="main">
      <div class="j-article  layui-col-md9 bgforcolor">
    <div class="title1">{{content.篇名}}</div>
    <div class="title2">{{content.作者}}
        {{content.年}}年
        {{content.期}}期
    </div>
    <div class="title2">
        {{content.中文关键词}}
      
    </div>
        <div class="detailcontent">
            摘要： 
         {{content.中文摘要}}

        </div>
        <p class="detail-line-row">发表时间:{{content.出版日期}}</p>

    <div class="dllink">
        <a class="icon-dlcaj" title="caj下载" href="javascript:void(0);" urtp-data-action="download"  urtp-data-type="cajdown" @click="down(content)"><i></i>PDF下载</a>
        <a class="icon-dlpdf" title="pdf下载" href="javascript:void(0);" urtp-data-action="download"  urtp-data-type="pdfdown" @click="read(content)"><i></i>PDF阅览</a>
    </div>
 
</div>
        </el-main>
  </div>
    <onlinereades ref="onlinereadref"/>
  </div>
</template>
<script>
import onlinereades  from '@/views/common/onlinereades.vue'
import Header from "../common/header.vue";
import { findbyid} from "@/api/cjfx";
export default {
  name:'',
  components: {Header,onlinereades},
  props:[],
  data () {
  return {
      content:[]
    }
  },
  computed: {},
  watch: {},
  created() {},
  mounted(){
    this.findbyid()
  },
  methods: {
       async findbyid(){
        var data = await findbyid({
          index:this.$route.query.index,
          id:this.$route.query.id
        });
        this.content=data.data
        console.log("content",data.data);
        },
            down(row) {

      window.location.href ="http://localhost:8990/ng/es/download?filename="+ row.文件名+"&year="+row.年+"&qi="+row.期
      +"&zjdm="+row.专辑代码 +"&gph="+row.光盘号 +"&pykm="+row.拼音刊名 +"&title="+row.篇名
  },
   read(row){
     this.$refs.onlinereadref.onlinereadProgress(row)
  }
  }
}
</script>
<style lang='css' scoped>
.container {
  position: relative;
  width: 1229px;
  margin: 0 auto;
  overflow: hidden;
  background-color: #ffffff;
  margin-bottom: 50px;
}

.high20 {
  height: 20px;
  width: 100%;
  overflow: hidden;
  display: block;
}

h2 {
  font-size: 22px;
  text-align: center;
  color: #f85a06;
  padding: 20px 0;
  font-weight: bold;
}

h5 {
  font-size: 14px;
  text-align: center;
  color: #A3A3A3;
  padding-bottom: 30px;
  font-weight: normal;
  border-bottom: 1px solid #D0D0D0;
}

h3 {
  font-size: 18px;
  text-align: left;
  color: #1D1D1D;
  font-weight: normal;
  line-height: 35px;
  padding: 35px 0;
}


.main {
  margin: 90px 42px 42px 38px;
  /* width: 1143px; */
  min-height: 420px;
  background: #FAFAFA;
  border: 1px solid #D8D8D8;
  box-shadow: 0px 4px 7px 0px rgba(0, 0, 0, 0.0900);

}

.j-article .title1 {
  font-size: 24px;
  text-align: center;
  line-height: 56px;
  padding-top: 15px;
}

.j-article .title2 {
  text-align: center;
  color: #9e9e9e;
  line-height: 26px;
  padding-bottom: 5px;
}

.j-article .detailcontent {
  line-height: 28px;
  font-size: 14px;
  text-indent: 2em;

}

.j-article .detail-line-row {
  line-height: 34px;
  font-size: 14px;
  text-indent: 2em;
}

.dllink {
  /* float: right; */
  text-align: center;
  width: 100%;
  height: 65px;
  margin-top: 22px;
}

.dllink a {
  display: inline-block;
  width: 128px;
  height: 38px;
  font-size: 16px;
  line-height: 37px;
  color: #fff;
  margin: 0 8px;
  border-radius: 9px;
  padding: 0 8px;
}

.icon-dlcaj {
  background-color: #3594ff;
}

.icon-dlpdf {
  background-color: #6fb22e;
}

</style>